<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>javascript | yangjunbo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="MinHow,MinHow's Blog" />
  
  <meta name="description" content="对象.一 . 对象对象在js中有狭义对象.广义对象两种狭义对象就是用{}这种字面量形式定义的对象,他是一组属性对的无序组合狭义对象用对象存储Var obj = {Name:’小明’Age:18Hobby:[“足球””绣花””打麻将”]}这是一个人;他除了三个属性;其他的什么也没有 如果用数组存储刚才得值var o = [“小明”,”男”,12,[‘足球’,’绣花’,’打麻将’]]alert(o[2">
<meta property="og:type" content="article">
<meta property="og:title" content="javascript">
<meta property="og:url" content="http://yoursite.com/2015/08/27/javascript - 副本/index.html">
<meta property="og:site_name" content="yangjunbo">
<meta property="og:description" content="对象.一 . 对象对象在js中有狭义对象.广义对象两种狭义对象就是用{}这种字面量形式定义的对象,他是一组属性对的无序组合狭义对象用对象存储Var obj = {Name:’小明’Age:18Hobby:[“足球””绣花””打麻将”]}这是一个人;他除了三个属性;其他的什么也没有 如果用数组存储刚才得值var o = [“小明”,”男”,12,[‘足球’,’绣花’,’打麻将’]]alert(o[2">
<meta property="og:updated_time" content="2017-08-27T08:46:24.852Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="javascript">
<meta name="twitter:description" content="对象.一 . 对象对象在js中有狭义对象.广义对象两种狭义对象就是用{}这种字面量形式定义的对象,他是一组属性对的无序组合狭义对象用对象存储Var obj = {Name:’小明’Age:18Hobby:[“足球””绣花””打麻将”]}这是一个人;他除了三个属性;其他的什么也没有 如果用数组存储刚才得值var o = [“小明”,”男”,12,[‘足球’,’绣花’,’打麻将’]]alert(o[2">
  
  
    <link rel="icon" href="/favicon.ico">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
  

</head>

<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/images/logo.png" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        欢迎来到我的博客
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        My name is yangjunbo
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Home"  href="http://yangjunboyjb.oschina.io/">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com/wongminho">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                        <a title="Weibo" target="_blank" href="http://weibo.com/5938689701/profile?topnav=1&wvr=6&is_all=1">
                            <i class="fa fa-weibo fa-2x"></i></a>
                    
                        <a   ">
                            <i class="fa fa-twitter fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>

      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-javascript - 副本" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      javascript
    </h1>
    <div class="post-title-bar">
      <ul>
          
        <li>
          <i class="fa fa-calendar"></i>  2015-08-27
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <h2 id="对象"><a href="#对象" class="headerlink" title="对象."></a>对象.</h2><h3 id="一-对象"><a href="#一-对象" class="headerlink" title="一 . 对象"></a>一 . 对象</h3><p>对象在js中有狭义对象.广义对象两种<br>狭义对象就是用{}这种字面量形式定义的对象,他是一组属性对的无序组合<br>狭义对象<br>用对象存储<br>Var obj = {<br>Name:’小明’<br>Age:18<br>Hobby:[“足球””绣花””打麻将”]<br>}<br>这是一个人;他除了三个属性;其他的什么也没有</p>
<p>如果用数组存储刚才得值<br>var o = [“小明”,”男”,12,[‘足球’,’绣花’,’打麻将’]]<br>alert(o[2])</p>
<p>数组只能存储值;不能存储键;数组里边的语意不详;对象能存储值,还能存储键;存储值得语义值得语义,属性上叫做  key 键</p>
<p>对象就是一组值;和他的语义的封装<br>广义对象<br>广义对象是一个对象,但是除了一组属性还有别的东西</p>
<p>DOM元素也是对象;和狭义对象里边只有一组值,别的什么也没有不一样<br>var o = document.getElementById(“box”);<br>     console.log(typeof o)//object<br>     o.name = ‘xiaoming’;<br>     o.age = 18<br>     console.log(o.name)<br>通过DOM方法得到一个DOM对象;  可以通过点语法给这个对象添加属性; 可以通过DOM对象点添加的属性访问到添加的属性; 因为这个DOM对象有一个标签实体在页面上</p>
<p>数组也是对象<br>    数组有对象的一切特征;就是添加属性;数组名也可以点出添加属性;也可以点得到属性</p>
<p>函数也是对象<br>函数有对象的一切特征;就是添加属性;函数名也可以点出添加属性;也可以点得到属性<br>但是typeof检测function返回的值是function;这是系统规定;但他也是对象<br>正则表达式也是对象<br>    Var o = /\d/<br>    O.name = “小明”<br>    Console.log(typeof  o)//输出object    </p>
<p>系统内置的所有引用类型值;都是对象;他们都能添加自定义属性;并且能够访问这些属性<br>对象:<br>●{}对象<br>●function<br>●array<br>●正则表达式<br>●DOM<br>●Window,document,Math,Data<br> 能加属性的东西都叫对象</p>
<p>只能创建狭义对象;不能创建广义对象<br>1.2 对象和JSON的区别<br>Json就是JavaScript objectnotation,就是的严格表示法,是就是对象的严格子集<br>JSON对所有的键要求必须加双引号,而js对象实际上不要求加双引号.因为JSON是一个语言交换的格式;可以负责和PHP信息交换的媒介<br>这就是标准的JSON;键名可以不加双引号<br>Var obj = {<br>“name”:”xiangming”<br>“age”:18,<br>“sex”:”男”<br>}</p>
<p>1.3对象的方法<br>如果一个对象的属性值是一个函数;我们称这个属性是这个对象的方法;当一个函数当做对象的方法被调用的时候;这个函数里边的this值得是这个对象;<br>调用对象里边的函数时;是通过对象打点调用的函数;这个函数的上下文就是调用函数的对象;所以函数里边的this指向这个调用函数的对象;水调用函数this指向谁<br>所有的全局变量都是Window对象;window的属性就是全局变量<br>函数的上下文是函数调用的时候表现的性质;不是函数定义写死的性质;<br>函数的上下文(context)</p>
<h3 id="二-函数的上下文"><a href="#二-函数的上下文" class="headerlink" title="二.函数的上下文"></a>二.函数的上下文</h3><p>1.0<br>1.0:函数中的变量都是局部变量;不是Window的属性;就是一个变量<br>2.0函数如果是一个对象方法,对象如果打点调用;函数胡的上下文就是这个对象<br>3.0函数时事件处理函数;函数的上下文就是触发这个事件的函数<br>4.0函数是事件处理函数;函数的上下问就是触发这个事件的对象<br>5.0定时器调用函数胡;上下文是window对象<br>6.0备份上下文 var self= this<br>7.0数组中的函数被数组调用this指向这个数组<br>8.0在函数内部;用this调用函数自身是不行的;必须使用arguments.callee ;因为arguments.callee 就是他自己;得到的是形参的长度<br>function fun(a,b,c,d,){<br>    alert(arguments.callee ===fun)<br>}<br>    fun(8,6,5,56,)<br>2.1<br>Call()和apply()<br>这两个函数都是函数的方法;只有函数能打点调用call().apply();表示指定的上下文执行这个函数</p>
<p>如果必须让函数中的this指向obj中的属性;此时可以用call(obj).apply(obj)指定上下文;call是呼叫;apply是应用的意思<br>两个函数的区别体现在参数上;fun函数可以接收参数;apply需要用数组来体现这些参数;而call需要用逗号隔开,罗列这些参数<br>function fun(){<br>        console.log(this.age)<br>    }<br>    var obj = {<br>        “name”:”xiaoming”,<br>        “age”:18<br>    }<br>    fun.call(obj)<br>    fun.apply(obj)<br>Math.max()只能接受单独罗列的参数;不能传入数组<br>    Math.max(255,233,244,222)<br>Math.max.apply可以拆包;将数组装换为参数<br>Math.max.apply(window,[255,233,244,222])<br>3.new运算符<br>用new运算符调用一个函数<br>Function fun(){}<br>New  fun<br>函数可以执行;new是函数全新的一个调用方式;用new调用函数的时候会经历四部<br>1:函数内部自己创建一个局部变量;是一个空对象<br>2:函数见自己的上下文设置为这个对象;即语句中的this就指向这个空对象<br>3:函数将执行所有语句<br>4:函数执行后;函数将return这个对象,函数将把自己的上下文返回<br>JS中没有类的概念;JS中只有构造函数;当一个函数被new操作符调用的时候;这个函数就是一个构造函数;他总能返回一类具有相同属性群的对象;这个函数很神奇;像一个模子;在制作类似的对象;<br>为了提醒其他程序员这是一个new调用的函数;这类函数的名字首字母必须大写<br>function fun(name,age){<br>    this.name = name,<br>    this.age = age<br>}<br>var obj = new fun(“小明”,18)<br>var obj01 = new fun(“小红”,18)<br>注意:<br>    如果直接用圆括号调用函数传参;那么函数在中的this指向window;所有this下的属性都被设置为window下的属性</p>
<p>一个函数可以用new来调用,此时这个函数按四部走执行.此时将返回一个对象,这个函数我们称为构造函数<br>一般的,用new多次调用同一个函数;总能得到相同属性群的对象;我们可以称这些对象是”同一个类的实例”;或者称他们为同一类对象;<br>JavaScript不是一款面向对象的语言;他只是基于对象<br>4.原型链<br>构造函数都有一个自带的属性prototype;构造函数的prototype指向谁;new的对象的<strong>proto</strong>就指向谁;这个<strong>proto</strong>有原型链查找功能<br>构造函数中,prototype来定义方法;定义的是构造函数的实例方法;不是构造函数的方法;<br>Object.prototype是所有原型链的终点</p>
<p>5.Object函数<br>系统内置一个object函数;我们可以直接new他;返回一个空对象;然后就可以给这个空对象添加属性</p>
<p><script><br>Var obj = new Object<br>Obj.a = 1;<br>Obj.b = 2;<br>Console.log(obj)<br></script><br>6.function函数<br>用构造函数构造一个函数;创建一个函数;在new Function的时候,先罗列所有的形参列表;最后一个参数是函数里边的语句.参数都是字符串<br>var sum = new Function(“a”,”b”,”alert(a+b)”)<br>console.log(sum)<br>sum(20,20)<br>任何函数都是function的实例<br>function add(a,b){<br>    alert(a+b)<br>}<br> add.<strong>proto</strong>  =  Function.prototype</p>
<p>Function是系统内置构造函数,Object也是Function的实例;Function也是自己的实例</p>
<p>Function也是自己的实例;唯一一个子级可以new出自己</p>
<p>7.Array函数<br>Array是系统内置的数组构造函数;用于构造数组<br>New出来的数组可以写参数;表示数组的长度;但数组还是空数组;这里的参数表示数组的长度;但是他是默认的;对数组没有约束力<br>var arr = new Array(5)<br>console.log(arr)<br>console.log(arr.length)</p>
<p>8.number 函数<br>Number是系统内置的构造函数;用于创建数字对象<br>var s = new Number(3)<br>console.log(s)<br>console.log(typeof s)<br>用内置构造函数创建数字的时候,得到的是一个对象,这个对象的原始值属性是PrimitiveValue;这个属性不能被获取<br>Var a = 3<br>Var b = new Number(3)<br>Alert(a===b)//false<br>字面量是number类型    e而new出来的是对象<br>用Number系统内置的构造函数创建的对象;可以参与运算;进行if判断时;此时这个数字是一个对象;对象即使是空对象也能通过if验证;无论这个数字是几;都能通过if<br>Number可以把各种值转换成数值;转不了就是NAN,不需要new来调用z</p>
<h3 id="三-原型链深入"><a href="#三-原型链深入" class="headerlink" title="三.原型链深入"></a>三.原型链深入</h3><p>1.<strong>proto</strong>属性<br>w3c没有规定一个元素的原型链有可见的属性,谷歌浏览器特有的<strong>proto</strong>属性;其他浏览器有原型链机制;但我们看不见这个属性<br>1.1引用类型值得对象他们的字面量的<strong>proto</strong>就是他们类型构造函数的prototype</p>
<p>1.2通过new关键字,此时构造函数的prototype就是实例的<strong>proto</strong><br>1.3语言规范中;原型链出现就不能更改<br>2.ECMAscript2016中;提供了Object.create()函数;可以让我们制定一个对象为原型对象.来创建新对象</p>
<p>这个Object.create()浏览器兼容很差;自己写一个函数;接收一个对象参数返回以这个对象为原型对象的新对象;可以用一个临时构造函数中转<br>Function create(obj){<br>虚构一个构造函数<br>Function f(){}<br>让这个构造函数的prototype指向传入的对象<br>F.prototype = obj<br>Return new f()<br>}<br>Object.prototype是所有原型链的终点<br>Object.prototype.<strong>proto</strong>结果是null<br>对象toString()都是定义在Object.prototype上;而这个对象是所有原型链的终点;所以任何对象都可以调用toString方法;但切断原型链就不行了<br>事实上;语言设计中;当对象一旦生成;原型链一旦创建;就没有任何方法删除.或者改变原型链了<br>2.Constructor属性<br>任何一个构造函数的prototype属性身上都有一个constructor属性,指向构造函数<br>function People(){<br>}<br>var xiaoming = new People();<br>console.log(People.prototype.constructor === People)//true<br>console.log(xiaoming.constructor === People)//true</p>
<p>Js当中;当一个对象不被任何变量所引用;就会被垃圾回收机制当做垃圾所回收<br>constructor属性比较脆弱;当我们修改原型链比如People.prototype时;如果用字面量强行修改这个对象;此时实例对象的constructor就丢了<br>function People(name){<br>    this.name = name<br>}<br>People.prototype = {<br>    “hehe”: function () {<br>        alert(“hehe”)<br>    },<br>    “haha”: function () {<br>        alert(“haha”)<br>    }<br>}<br>var xiaoming = new People(“小明”)<br>xiaoming.haha()<br>xiaoming.hehe()<br>console.log(xiaoming.constructor === People)//Object  不再是People</p>
<p>Constructor属性确实在构造函数的prototype上;但这个属性是不可枚举的;<br>Constructor ===构造函数 //true<br>3.instanceof运算符 </p>
<p>这个运算符用来检测一个对象是不是另一个构造函数的实例<br>语法: 对象 instanceof 函数<br>定义:如果函数的prototype在对象的原型链上,此时返回true; 否则返回false<br>如果对象的原型链上,恰好有某一个元素是函数的prototype;此时返回true;否则返回false<br>因为Object是所有原型链的终点,所以所有对象 instanceof  Object 都返回true;<br>在JS中;没有一种可靠的方法验证一个元素是不是一个构造函数的实例</p>
<p>4.继承<br>计算机领域,关注两个类的关系,就是看属性;类和类之间有属性群相交,但不完全重合;此时认为两个类没有任何关系</p>
<p>人类和小学生类,小学生是一类人,小学生也是人,所以人类拥有的属性小学生一定拥有;但是小学生拥有的属性人类没有;小学生的方法人类没有;属性群是包裹关系<br>此时小学生类继承了人类所有的属性</p>
<p>此时计算机中的小学生继承了人类的所有属性<br>A继承了B<br>1.A拥有B所有对的属性和方法<br>2.A的属性群比B大<br>3.A把B 变得更具体,范围变得更小<br>``</p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2017年08月27日 16:46</p>
        <p>原始链接： <a class="post-url" href="/2015/08/27/javascript - 副本/" title="javascript">http://yoursite.com/2015/08/27/javascript - 副本/</a></p>
        <footer>
            <a href="http://yoursite.com">
                <img src="/images/logo.png" alt="yangjunbo">
                yangjunbo
            </a>
        </footer>
    </div>
</div>

      
    </div>
    <footer class="article-footer">
        <ul class="article-footer-menu">
            
            
        </ul>
        
    </footer>
  </div>
</article>


    <aside class="post-toc-pos">
        <nav class="post-toc-wrap">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#对象"><span class="post-toc-text">对象.</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#一-对象"><span class="post-toc-text">一 . 对象</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#二-函数的上下文"><span class="post-toc-text">二.函数的上下文</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#三-原型链深入"><span class="post-toc-text">三.原型链深入</span></a></li></ol></li></ol>
        </nav>
    </aside>
    

<nav id="article-nav">
  
    <a href="/2015/08/27/javascript - 副本 (2)/" id="article-nav-newer" class="article-nav-link-wrap">

      <span class="article-nav-title">
        <i class="fa fa-hand-o-left" aria-hidden="true"></i>
        
          javascript
        
      </span>
    </a>
  
  
    <a href="/2015/08/27/javascript/" id="article-nav-older" class="article-nav-link-wrap">
      <span class="article-nav-title">javascript</span>
      <i class="fa fa-hand-o-right" aria-hidden="true"></i>
    </a>
  
</nav>



    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2017 yangjunbo<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "http://yoursite.com",
      animate: true,
      isHome: false
  }
</script>
<div class="sidebar">
    <div id="sidebar-search">
        <i class="fa fa-search"></i>
    </div>
    <div class="sidebar-menu">
        <i class="fa fa-bars"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-tags">
            
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
</div>

<div class="search-container" id="search-container">
    <ul class="search-result" id="search-result">
    </ul>
</div>
<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/sidebar-menu-box.js"></script>


  <script src="//cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
  <div id="particles"></div>
  <script src="/js/particles.js"></script>







  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  <script src="//cdn.bootcss.com/scrollReveal.js/3.0.5/scrollreveal.js"></script>
  <script src="/js/animate.js"></script>

  </div>
</body>
</html>